<template>
    <div>
        <div class="p-user-center p-change-pwd" style="min-height:100%;">
            <div class="back-ground">
            </div>
            <div class="page-body">
                <div class="user-profile">
                    <div class="avatar">
                        <div class="c-face-img-con c-face-img" style="width: 160px; height: 160px;">
                            <img class="personalImg" :src="user.userImg" alt="" title=""
                                 style="border-radius: 50%;">
                        </div>
                    </div>
                    <div class="user-info">
                        <div class="name-row">
                            <span class="name">{{user.username}}</span>
                            <a target="_self" href="/personalPage" class="user-home-link">
                                个人页面&gt;&gt;
                            </a>
                        </div>
                        <div class="describe">
                            {{user.introduction}}
                        </div>
                        <a title="修改个人资料" href="personalSetting" class="icon-edit">
                            <i class="el-icon-edit"></i>
                        </a>
                    </div>
                </div>
                <div class="content-area">
                    <div class="left-nav">
                        <a href="/myLikes" :class="{active:shows==1}" class="nav-item" >
                            <i class="fonts icon-favorites-fill"></i>
                            我喜欢的
                        </a>
                        <a href="/personalWorks" :class="{active:shows==2}" class="nav-item">
                            <i class="fonts el-icon-s-management"></i>
                            作品管理
                        </a>
                        <a href="/myDemands" :class="{active:shows==7}" class="nav-item">
                            <i class="fonts el-icon-s-promotion"></i>
                            我的需求
                        </a>
                        <a href="/myOrders" :class="{active:shows==3}" class="nav-item">
                            <i class="fonts el-icon-s-order"></i>
                            我的订单
                        </a>
<!--                        <a href="" :class="{active:shows==4}" class="nav-item">-->
<!--                            <i class="fonts el-icon-message-solid"></i>-->
<!--                            最新消息-->
<!--                        </a>-->
                        <a href="/personalSetting" :class="{active:shows==5}" class="nav-item">
                            <i class="fonts el-icon-s-tools"></i>个人设置
                        </a>
                        <a href="/changePassword" :class="{active:shows==6}" class="nav-item">
                            <i class="fonts el-icon-key"></i>
                            修改密码
                        </a>
                    </div>
                    <div class="content-header">
                        <div class="header-toolbar">
                            <span>我喜欢的</span>
                        </div>
                    </div>
                </div>
                <div>
                    <el-form class="content-body">

                        <el-row class="swiper-painter-item">
                            <el-card class="swiper-painter-cards" v-for="item in likesWorkInfo">
                                <button class="work-button" style="border: #ffffff">
                                    <div v-if="item.worksInfo.workFileType === 1" @click="workDetail(item.worksInfo)">
                                        <img class="image" :src="item.worksInfo.workFilename"/>
                                    </div>
                                    <div @click="workDetail(item.worksInfo)" v-else>
                                        <video :poster="item.poster" :controls="true" class="video_fo"
                                               :src="item.worksInfo.workFilename"></video>
                                    </div>

                                    <div class="work-div">
                            <span class="painter-item-name">
                                {{item.worksInfo.workName}}
                            </span>
                                    </div>
                                    <div class="introduction-motto">
                                    <span class="author-span">
                                        <img class="work-user-img" :src="item.worksInfo.userImg">
                                        <span class="author-span">
                                            {{item.worksInfo.username}}
                                        </span>

                                    </span>
                                        <span class="star-span">
                                    <i class="icon-favorites"></i>
                                    {{item.worksInfo.workLikesNums}}
                                    </span>
                                    </div>

                                </button>
                            </el-card>

                        </el-row>


                    </el-form>
                </div>


            </div>
        </div>
    </div>
</template>

<script>
    import HeaderNav from "../../components/HeaderNav";
    import {selectUser} from "../../assets/api/userApi";
    import {selectWorksByLike} from "../../assets/api/likesApi";

    export default {
        data() {
            return {
                active: "",
                user: {},
                shows: 1,
                likesWorkInfo:[],
            }
        },
        methods: {
            getUserInformation() {
                this.user.userId = localStorage.userId;
                selectUser(this.user).then((res) => {
                    this.user = res.data
                })
            },
            getLikesWorks(){
                let data = {};
                data.userId = localStorage.userId;
                selectWorksByLike(data).then(res=>{
                    this.likesWorkInfo = res.data;
                })
            },
            workDetail(work) {
                this.$router.push({path:'/workDetail',query:{id:work.workId}});
            },
        },
        created() {
            this.getUserInformation();
            this.getLikesWorks();
        },
        components: {
            HeaderNav
        }
    }
</script>

<style scoped>
    .p-user-center {
        position: relative;
        padding-top: 70px;
        padding-bottom: 120px;
    }

    .back-ground {
        background-image: url("../../assets/img/personalPageBg.png");
        background-repeat: repeat;
        background-size: 100% 100%;
        position: absolute;
        height: 300px;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }

    .page-body {
        width: 1200px;
        margin: 0 auto;
        z-index: 1;
        position: relative;
    }

    .user-profile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        min-height: 160px;
    }

    .personalImg {
        height: 160px;
        width: 160px;
    }

    .avatar {
        height: 160px;
        width: 160px;
    }

    .c-face-img-con {
        display: inline-block;
        position: relative;
    }
    .user-info {
        flex-grow: 1;
        margin-left: 40px;
    }

    .name-row {
        height: 40px;
        display: flex;
        align-items: center;
    }
    .name {
        font-size: 30px;
        color: #fff;
    }
    .user-home-link {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 600;
    }
    .describe {
        height: 28px;
        font-size: 16px;
        color: #aaa;
        line-height: 21px;
        margin-top: 16px;
        word-break: break-all;
    }
    .icon-edit {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #000;
        background: #fff;
        width: 50px;
        height: 50px;
        margin-top: 26px;
        font-size: 20px;
        text-decoration: none;
    }

    .user-home-link {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 600;
        color: #adb3fb;
        text-decoration: none;
    }

    .left-nav {
        margin-top: 100px;
        width: 223px;
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        float: left;
        height: 700px;
    }

    .nav-item:not(:first-of-type) {
        margin-top: 20px;
    }

    .nav-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #2f2f2f;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        position: relative;
        text-decoration: none;
    }

    .fonts {
        font-size: 24px;
        margin-right: 10px;
    }

    .active {
        color: #adb3fb;
    }

    .content-header {
        width: 80%;
        height: 57px;
        background: #fff;
        border-radius: 4px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 20px 0 16px;
        font-size: 18px;
        font-weight: 600;
        color: #2f2f2f;
        float: right;
        margin-top: 100px;
    }

    .header-toolbar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    .content-body {
        padding: 0 0;
        background: #fff;
        border-radius: 4px;
        margin-top: 182px;
        width: 80%;
        max-width: 1199px;
        margin-left: 242px;
        height: 619px;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .swiper-painter-item {
        overflow: hidden;
        border-radius: 4px;
        display: flex;
        flex-wrap: wrap;
    }

    .swiper-painter-cards {
        margin-top: 15px;
        height: 400px;
        margin-left: 10px;
        width: 300px;
    }

    .painter-item-name {
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        align-items: center;
        font-size: 14px;
        color: #333;
    }

    .introduction-motto {
        background-color: #ffffff;
        margin-top: 8px;
        font-size: 14px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        text-justify: inter-ideograph;
    }

    .image {
        width: 100%;
        height: 250px;
        display: block;
        margin: 0 auto
    }
    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .star-span {
        color: #adb3fb;
        float: right;
        background-color: #ffffff;
        margin-top: 20px;
    }

    .author-span {
        color: #777;
        font-size: 14px;
        max-width: 154px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background-color: #ffffff;
    }

    .work-user-img {
        width: 55px;
        height: 55px;
        border-radius: 100%;
    }

    .work-div {
        background-color: #ffffff;
        margin-top: 20px;
    }

    .work-button {
        background-color: #ffffff;
        border: #fff;
        text-align: center;
    }


    a {
        text-decoration: none;
    }
    .c-face-img-con {
        display: inline-block;
        position: relative;
    }

    .c-face-img img {
        width: 100%;
        height: 100%;
    }

    .artwork-modal__operator i{
        color: #d8d8d8;
        font-size: 32px;
        margin-bottom: 5px;
    }
    .video_fo {
        position: relative;
        width: 283px;
        height: 200px;
        left: -20px;
    }
</style>
